<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="css/swiper-3.2.7.min.css">
	<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/eeds.css"/>

</head>
<body>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
        	<!--第一屏-->
            <div class="swiper-slide one">
            	<div class="top ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="0s">
            		<img src="images/one.jpg"/>
            	</div>
            	
            	<div class="bottom">
            		<img src="images/jiezhi.png" class="jiezhi ani"  swiper-animate-effect="bounceInDown" swiper-animate-duration="1s" swiper-animate-delay="2s" />
            		<img src="images/womenjiehunla.png" class="jiehunla ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="2s" swiper-animate-delay="0.5s" />
            		<img src='images/2016117.png' class="time ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="3s"/>
            	</div>
            </div>
            <!--第一屏结束-->
            
            <!--<!--第二屏-->
            <div class="swiper-slide two">
            	<div class="left ani"  swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="0.3s">
            		<img src="images/two1.jpg"/>
            	</div>
            	<div class="right ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="1.3s">
            		<div class="t">
            			<img src="images/two2.jpg"/>
            		</div>
            		<img src="images/twoline.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="2.3s"/>
            		<img src="images/t1.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="2.8s"/>
            		<img src="images/twoline.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="3.8s"/>
            		<img src="images/t2.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="4.3s"/>
            		<img src="images/twoline.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="5.3s"/>
            		<img src="images/t3.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="5.8s"/>
            		<img src="images/twoline.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="6.8s"/>
            		<img src="images/t4.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="7.3s"/>
            		<img src="images/twoline.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="8.3s"/>
            		<img src="images/t5.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="8.8s"/>
            		<img src="images/twoline.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="9.8s"/>
            	</div>
            	
            	<img src="images/fengche.gif" class="fengche ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="10.3s"/>
            </div>-->
            <!--第二屏结束-->
            <!--第三屏-->-->
            <div class="swiper-slide three">
				<div class="top ani"  swiper-animate-effect="bounceInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0.3s">
					<img src="images/three1.jpg"/>
				</div>
				<img src="images/aini.png" class="aini ani"   swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1.8s" />
				<img src="images/yibeizi.png" alt="" class="yibeizi ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1.8s"  />
            	<img src="images/hua.png"  class="hua ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="2s"  />
            	<img src="images/hua2.png" class="hua2 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="2s" />
            	<img src="images/dog.png" alt="" class="dog ani" swiper-animate-effect="slideInRight" swiper-animate-duration="2s" swiper-animate-delay="2s"/>
            </div>
          <!--第三屏结束-->
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

	<!--音乐区域-->
	<div id="music">
		<img src="images/music.gif" class="music_bg" />
		<img src="images/music.png" class="music_pic" />
	</div>
	<audio src="images/bgmusic.mp3" autoplay="autoplay" id="bgmusic"></audio>
	<!--音乐区域-->



    <!-- Swiper JS -->
    <script src="js/swiper-3.2.7.min.js"></script>
	<script src="js/swiper.animate1.0.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/hd.js" type="text/javascript" charset="utf-8"></script>
    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        direction: 'vertical',
        onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
    swiperAnimateCache(swiper); //隐藏动画元素 
    swiperAnimate(swiper); //初始化完成开始动画
  }, 
  onSlideChangeEnd: function(swiper){ 
    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
  } 
    });
    </script>
</body>
</html>










